<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>作业隔行变色</title>
		<style>
			table {
				margin: 30px auto;
				border: ;
				width: 500px;
				height: 280px;
				text-align: center;
				border-collapse: collapse;
				/*单线*/
			}
			
			table td {
				border: 1px solid lightgray;
				/*表格边框*/
			}
			
			table th {
				color: white;
				background-color: #0098C9;
				/*表头背景色*/
				border: 1px solid #D0D0D0;
				/*表头边框*/
			}
			
			.deep {
				background-color: #A3A3A3;
			}
			
			.tint {
				background-color: #CCCCCC;
			}
			
			.white {
				background-color: white;
			}
		</style>
	</head>

	<body>
		<table>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>课程</th>
				<th>成绩</th>
			</tr>

			<tr>
				<td>1</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>2</td>
				<td>吕布</td>
				<td>日语</td>
				<td>100</td>
			</tr>
			<tr>
				<td>3</td>
				<td>吕蒙</td>
				<td>营销学</td>
				<td>100</td>
			</tr>
			<tr>
				<td>4</td>
				<td>吕尚</td>
				<td>数学</td>
				<td>100</td>
			</tr>
			<tr>
				<td>5</td>
				<td>吕雉</td>
				<td>英语</td>
				<td>100</td>
			</tr>
			<tr>
				<td>6</td>
				<td>吕超</td>
				<td>体育</td>
				<td>100</td>
			</tr>
		</table>
		<script>
			var array = document.getElementsByTagName("tr");
			for (var i = 0; i < array.length; i++) {
				//奇数排
				if ((i + 1) % 2 == 0) {
					array[i].className = "tint";
					// 偶数排鼠标移除事件
					array[i].onmouseout = RestoreT;
				} //奇数排
				else {
					array[i].className = "deep";
					// 奇数排鼠标移除事件
					array[i].onmouseout = RestoreD;
				}
				//鼠标悬停事件
				array[i].onmouseover = ColorChange;
			}

			function ColorChange() {
				this.className = "white";
			}

			function RestoreT() {
				this.className = "tint";
			}

			function RestoreD() {
				this.className = "deep";
			}
		</script>

	</body>

</html>